<template>
  <BasicTable @register="registerTable">
    <template #toolbar>
      <a-button type="danger" @click="handleDeleteBatch"> 删除 </a-button>
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            icon: 'ant-design:delete-outlined',
            color: 'error',
            popConfirm: {
              title: '是否确认删除',
              placement: 'leftBottom',
              confirm: handleDelete.bind(null, record),
            },
          },
        ]"
      />
    </template>
  </BasicTable>
</template>
<script lang="ts">
  import { defineComponent, h } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns, searchFormSchema } from './logList.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getAdminLogList, getAdminLogDel } from '/@/api/system/system';
  import { useUserStore } from '/@/store/modules/user';

  export default defineComponent({
    name: 'LogList',
    components: { BasicTable, TableAction },
    setup() {
      const userStore = useUserStore();
      let serverInfo = userStore.getServerInfo;
      const { createMessage, createConfirm } = useMessage();
      const [registerTable, { reload, getSelectRowKeys }] = useTable({
        title: '操作日志',
        api: getAdminLogList,
        columns,
        formConfig: {
          labelWidth: 100,
          schemas: searchFormSchema,
          autoSubmitOnEnter: true,
        },
        searchInfo: {
          op: 'search',
        }, //额外的参数
        rowSelection: {
          type: 'checkbox',
          columnWidth: 40,
        },
        clickToRowSelect: false,
        beforeFetch: (info) => {
          let newInfo = info;
          if (newInfo.dates && newInfo.dates.length > 0) {
            newInfo.beginDate = newInfo.dates[0];
            newInfo.endDate = newInfo.dates[1];
            delete newInfo.dates;
          }
          return newInfo;
        },
        useSearchForm: true,
        showTableSetting: true,
        size: serverInfo.tableDensity || 'middle',
        bordered: serverInfo.tableBordered,
        indexColumnProps: { width: 50 },
        showIndexColumn: true,
        rowKey: 'id',
        actionColumn: {
          width: 80,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: undefined,
        },
      });

      async function handleDelete(record: Recordable) {
        await getAdminLogDel({ ids: record.id }).then(() => {
          handleSuccess();
        });
      }

      async function handleDeleteBatch() {
        let checkes = getSelectRowKeys();
        console.log('checkes', checkes);
        if (checkes.length == 0) {
          createMessage.warn('请选择记录');
          return;
        }

        createConfirm({
          iconType: 'warning',
          title: () => h('span', '您确定删除么？'),
          onOk: async () => {
            let ids = checkes.join(',');
            await getAdminLogDel({ ids: ids });
            createMessage.success('操作成功');
            reload();
          },
        });
      }
      function handleSuccess() {
        reload();
      }

      return {
        registerTable,
        handleDelete,
        handleSuccess,
        handleDeleteBatch,
      };
    },
  });
</script>
